<template>
	<div>
		<slot></slot>
	</div>
</template>

<script>
export default {
	name: 'Teleport',
	props: {
		to: {
			type: String,
			required: true
		}
	},
	mounted() {
		const toEl = document.querySelector(this.to)
		if (toEl) {
			toEl.appendChild(this.$el)
		}
	},
	destroyed() {
		const toEl = document.querySelector(this.to)
		if (toEl) {
			toEl.removeChild(this.$el)
		}
	}
}
</script>
